
<script>
export default {
  name: 'DataList',
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchSheet: '',
      radioLable: '',
    };
  },
  watch: {
    dataList(newVal) {
      this.radioLable = '';
      this.$emit('on-selectList', this.radioLable);
    },
  },
  methods: {
    selectDataSheet(item) {
      this.$emit('on-selectList', item);
    },
  },
};
</script>

<template>
  <div class="datav-datalist">
    <Input
      v-model="searchSheet"
      placeholder="请输入关键字..."></Input>
    <RadioGroup
      v-model="radioLable"
      @on-change="selectDataSheet">
      <Radio
        v-for="(item,index) in dataList"
        :key="index"
        :label="item.id">{{ item.name }}</Radio>
    </RadioGroup>
  </div>
</template>

<style lang="less" scoped>
.datav-datalist {
  width: 100%;

  .k-input-wrapper {
    margin-bottom: 10px;

    /deep/input {
      border: none;
      border-bottom: 1px solid #dddee1;
    }

    /deep/ input:hover {
      border-bottom: 1px solid #2d8cf0;
    }
  }

  > div {
    overflow-y: auto;
    max-height: 200px;
  }

  .k-radio-group {
    display: block;

    .k-radio-wrapper {
      display: block;
      line-height: 25px;
    }
  }
}
</style>
